<template>
  <page-header-wrapper :title="false">
    <a-card title="优秀微信">
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="goodColumns"
        :data="goodData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`搜索${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
            重置
          </a-button>
        </div>
        <div
          slot="filterSelect"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-select
            show-search
            style="width: 188px; margin-bottom: 8px; display: block;"
            :placeholder="`选择${column.title}`"
            :value="selectedKeys[0]"
            :filter-option="filterOption"
            @change="(value) => setSelectedKeys(value ? [value] : [])"
            @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
          >
            <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
            重置
          </a-button>
        </div>
        <div
          slot="filterRange"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-range-picker
            style="width: 228px; margin-bottom: 8px; display: block;"
            :value="createValue"
            @change="onChange"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 110px; margin-right: 8px"
            @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot='group_type' slot-scope='text'>
          {{text === 'pt' ? '专利' : text === 'sh' ? '售后' : '商标'}}
        </template>
        <template slot="wx_index" slot-scope="text, record, index">
          {{index + 1}}
        </template>
        <template slot="image2" slot-scope="text, record">
          <a @click="handlePreview(record.image2)">
            <img :src="record.image2" width="30" height="30" />
          </a>
        </template>
        <template slot="image" slot-scope="text, record">
          <a @click="handlePreview(record.image)">
            <img :src="record.image" width="30" height="30" />
          </a>
        </template>
      </s-table>
    </a-card>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel0">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/wechat'
  import { getStatusWechatList } from '@/api/wechat'
  const goodColumns = col.good

  export default {
    components: {
      STable
    },
    name: 'GoodWechat',
    data () {
      return {
        goodColumns,
        goodData: parameters => {
          return getStatusWechatList(Object.assign(parameters, this.queryParam)).then(res => {
            this.adviserOpts = res.result.advisers
            return res.result
          })
        },
        queryParam: {},
        previewVisible: false,
        previewImage: '',
        adviserOpts: {},
        createValue: []
      }
    },
    created () {
      this.queryParam['filter[type]'] = '2'
    },
    methods: {
      onChange (date, dateString) {
        this.createValue = date
        this.queryParam['filter[begin_sign_time]'] = dateString[0]
        this.queryParam['filter[end_sign_time]'] = dateString[1]
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[begin_sign_time]']
        delete this.queryParam['filter[end_sign_time]']
        this.$refs.table.refresh(true)
      },
      async handlePreview (file) {
        const app = this
        app.previewImage = file
        app.previewVisible = true
      },
      handleCancel0 ({ fileList }) {
        this.fileList = fileList
      }
    }
  }
</script>

<style scoped>

</style>
